<template>
  <div class="dialog_info">
    <div class="dialog_info_title" >
        <!-- 左侧 -->
        <el-col :span="6" class="leftList" style="height: 100%;" >
            <!-- <div style="height: 680px;"> -->
                <div class="tabel_common tabel_commons">
                    <div class="table">
                        <div class="thead">
                        <div class="tr">
                            <div class="th" style="flex:2"> 序号 </div>
                            <div class="th" style="flex:4"> 洪痕名称 </div>
                        </div>
                        </div>
                        <el-scrollbar style="height:69vh; width: 100%;" class="el_scrollbar">
                        <div class="tbody">
                            <template v-if="!LshhDataList || LshhDataList.length <=0 ">
                            <div slot="no-results" class="noData" style="background-position: center 90%;padding-top: 98%;">暂无数据</div>
                            </template>
                            <div v-if=" LshhDataList && LshhDataList.length >0 " class="tr" v-for="(dict,index ) in LshhDataList" :key="dict.properties.PID"
                                :class="['tr', PionId == dict.properties.PID ? 'ta' : '']" @click="changePoint(dict)"
                                >
                                <div class="td" style="flex:2"> {{ index +1 }} </div>
                                <div class="td" style="flex:4"> {{ dict.properties.NAME }} </div>
                            </div>
                        </div>
                        </el-scrollbar>
                    </div>
                </div>
            <!-- </div> -->
        </el-col>

        <!-- 右侧 -->
        <el-col :span="17" class="rightDetailArea" style="height: 100%;">
            <template >
                <div class="subtitle">洪痕点详情</div>
            </template>
            <div class="JibenTable">
                <ul>
                  <li><div><div>洪痕名称：</div><div>{{LshhDetailDataList.properties.NAME ? LshhDetailDataList.properties.NAME : '&nbsp;' }}</div></div></li>
                  <li><div><div>洪痕高度(m)：</div><div>{{LshhDetailDataList.properties.HEIGHT ? LshhDetailDataList.properties.HEIGHT : '&nbsp;' }}</div></div></li>
                  <li><div><div>备注：</div><div>{{LshhDetailDataList.properties.DD5CRIB ? LshhDetailDataList.properties.DD5CRIB : '&nbsp;' }}</div></div></li>
                  <li><div><div>经度：</div><div>{{LshhDetailDataList.properties.LGTD ? LshhDetailDataList.properties.LGTD : '&nbsp;' }}</div></div></li>
                  <li><div><div>纬度：</div><div>{{LshhDetailDataList.properties.LTTD ? LshhDetailDataList.properties.LTTD : '&nbsp;' }}</div></div></li>
                </ul>
              </div>
              <div style="display: flex; flex-direction: column; justify-content: center;align-items: center;">
                <div class="dialogTab" style="margin-top:10px;margin-bottom:10px;">
                <span
                  v-for="(item, index) in imgType"
                  :key="index"
                  :class="{ activeTab: imgTypeNum == item.ind }"
                  class="tabTit"
                  @click="changeDig(item.ind)"
                >
                  {{ item.name }}
                </span>
              </div>
              <!-- 轮播图 -->
              <template>
                <div  v-if="imgTypeNum=='0' && LshhDetailDataList.properties.PICPATH.length>0" class="block imgList">
                  <el-carousel height="100%" :arrow="LshhDetailDataList.properties.PICPATH.length== 1? 'never' : 'always'">
                    <el-carousel-item v-for="(item, i) in LshhDetailDataList.properties.PICPATH" :key="i">
                      <img :src="item">
                      <div>{{ item }}</div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div  v-else-if="imgTypeNum=='0' && LshhDetailDataList.properties.PICPATH.length<=0"  class="imgList noImgList">
                    <div class="empty"> </div>
                    <img src="@/assets/dialog/noImgIcon.png" alt="">
                </div>
              </template>
              <!-- 受灾图 -->
              <template>
                <div v-if="imgTypeNum=='1' && LshhDetailDataList.properties.FPATH.length>0" class="block imgList">
                  <el-carousel height="100%" :arrow="LshhDetailDataList.properties.PICPATH.length== 1? 'never' : 'always'">
                    <el-carousel-item v-for="(item, i) in LshhDetailDataList.properties.FPATH" :key="i">
                      <img :src="item">
                      <div>{{ item }}</div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div   v-else-if="imgTypeNum=='1' && LshhDetailDataList.properties.FPATH.length<=0"   class="imgList noImgList">
                    <div class="empty"> </div>
                    <img src="@/assets/dialog/noImgIcon.png" alt="">
                </div>
              </template>
              </div>
              


        </el-col>

    </div>
  </div>
</template>
<script>
import FloodAnalysisInfo from '@/views/main/prediction/ShortPro/FloodAnalysisInfo'
import VillageDetails from './VillageDetails.vue'
import rainInfo from './rainInfo.vue'
import addressList from './addressList.vue'

import {
    GetVillageModel
} from '@/api/zyx.js'
import {
    GetEarlyWarningProcess
} from '@/api/zyx.js'
export default {
    components: {
        FloodAnalysisInfo,
        VillageDetails,
        rainInfo,
        addressList,
        'radarinfo': () => import('@/views/components/radarinfo.vue'),
    },
    data() {
        return {
            // 图片类型
            imgType: [
              {'name':'洪痕点图','ind':'0'},
              {'name':'受灾图','ind':'1'}
            ], 
            imgTypeNum:'0',
            // 历史洪痕页面数据
            LshhDataList: [],
            // 洪痕点详情数据
            LshhDetailDataList:{},
            parameter: {},
            PionId:undefined, //选中的点

        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    watch: {
        
    },
    created() {
        this.parameter = this.$store.getters.dlgParams.remarks
        this.getData() // 获取历史洪痕详情
    },
    methods: {
        // 获取数据
        getData(){
            var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/LSHH.json`
                this.$axios.get(url).then(res => {
                    this.LshhDataList = res.data.features;
                    res.data.features.map((item) => {
                        if(item.properties.PID == this.parameter.PID){
                            this.LshhDetailDataList = item;
                            this.PionId=item.properties.PID
                        }
                    })
                })
        },


        // 切换历史洪痕
        changePoint(dict){
            this.PionId=null
            this.PionId=dict.properties.PID
            this.LshhDetailDataList = dict;
        },

        // 切换展示图片类型
        changeDig(item) {
            let imgTypeNumber = item;
            this.imgTypeNum = item;
            switch (imgTypeNumber) {
                case '0':
                    
                    break;
                case '1':
                    
                    break;
            
                default:
                    break;
            }
        },
       
    }
}
</script>
<style lang="less" scoped>
 .tab{
        border-bottom: 1px solid #335875;
        padding-bottom: 15px;
        height: auto;
        overflow: hidden;
    }
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
     height: 100%;
    min-height:78vh;
    padding-top:10px;
    padding:10px 0px 20px  20px;
    box-sizing: border-box;
		.dialog_info_title {
			height: 100%;
			/deep/.el-tabs {
				height: 100%;
			}
		}

	}

	/deep/.el-tab-pane {
		height: 100%;
	}
	.water-table{
    height: calc(100% - 40px);
    padding:0px 20px;
    height: 700px;
	}
	.timeline {
		width: 100%;
		height: 97%;
		padding: 20px;
		overflow: auto;
		position: relative;
		color: #fff;

		.timelineList {
			display: -webkit-flex;
			display: flex;
			width: 100%;
			margin-bottom: 10px;

			.timeline_left {
				width: 200px;
				padding-right: 20px;
				text-align: right;

				.timeline_title {
					font-size: 16px;
					font-weight: bold;
					color: #00e9ff;
				}
			}

			.timeline_right {
				position: relative;
				padding-left: 3%;
				width: calc(~"100% - 220px");
			}

			.timeline_right:after {
				content: "";
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background: #649ff4;
				box-shadow: 0 0 10px #3484f7;
				position: absolute;
				top: 0;
				left: -6px;
				z-index: 9;
			}
		}
	}

	.timeline::after {
		content: "";
		width: 3px;
		height: 100%;
		background: #1b1670;
		position: absolute;
		top: 0;
		left: 220px;
  }
  .noData{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin:0px;
  }

  // 左侧列表
  .leftList{
    background: rgba(0,7,35,0.6);
    padding: 5px;
    padding-top: 10px;
    margin-right: 20px;
  }

  //右侧区域
  .rightDetailArea{

    .subtitle{
        height: 28px;
        line-height: 0px;
        margin: 10px 0 4px 0;
        text-indent: 4px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        background: url(../../assets/dialog/biaotikuang.png) no-repeat center;
        background-size: 100% 100%;
    }
  }

  .JibenTable  {
        width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
        margin-top: 10px;
    ul{
        display: flex;
        flex-wrap: wrap;
        background: rgba(0,165,233,0.2);
        font-size: 14px;
        padding: 0 10px ;
        width: 100%;
        li{
            box-sizing: border-box;
            width: 33%;
            border-bottom: 1px solid #3F72AA ;
            &>div{
              margin-bottom:10px ;
              margin-top:10px;
              border-left: 1px solid #3F72AA ;
              text-indent: 20px;
              background: url(../../assets/newimg/矩形.png) no-repeat left center;
              background-size: auto 66%;
              background-position:8px 8px ;
              &>:nth-child(1){
                color: #A5C2D8;
                margin-bottom: 4px;
              }
            }
        }
        &>:nth-last-child(1),>:nth-last-child(2){
          border: none;
        }
        &>:nth-child(1),>:nth-child(4){
          &>div{
              text-indent: 10px !important;
              border: none;
              background-position:0 8px !important ;
          }
        }
    }
}

.imgList {
    padding: 10px;
    //width: 50%;
    //height: 100%;
    width: 562px;
    height: 424px;
    background: url(../../assets/dialog/tukuang.png) no-repeat center;
    background-size: 100% 100%;

    img {
        width: 100%;
        height: 100%;
    }

    /deep/.el-carousel__item,
    /deep/.el-carousel {
        //height: 220px;
        height: 100%;
    }
}

.noImgList {
    display: flex;
    justify-content: center;
    align-items: center;
    img{
    width:100px;
    height:120px;
    }
}

</style>
